﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>家园介绍</title>
	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui.js"></script>
	<style>
		#text{
			text-align: center;
			font:normal 400 22px/30px "宋体" ;
			color : red;
		}
		#imgs{
			position: relative;
			opacity: 0;
			height: 800px;
		}
		#img1{

			display: none;
			position: absolute;
			top: 70px;
			left: 520px;
		}
		#img2{
			display: none;
			position: absolute;
			top: 70px;
			left: 720px;
		}
		#img3{
			display: none;
			position: absolute;
			top: 0;
			left: 300px;
		}
		#img4{
			display: none;
			position: absolute;
			top: 0;
			left: 940px;
		}
		#img5{
			display: none;
			position: absolute;
			top: 170px;
			left: 180px;
		}
		#img6{
			display: none;
			position: absolute;
			top: 170px;
			left: 1060px;
		}
		#img7{
			display: none;
			position: absolute;
			top: 330px;
			left: 300px;
		}
		#img8{
			display: none;
			position: absolute;
			top: 330px;
			left: 940px;
		}
		#img9{
			display: none;
			position: absolute;
			top: 445px;
			left: 620px;
		}

	</style>
<link type="text/css" rel="stylesheet" href="css/styles.css" />
	<script>
		$(function () {
			$("#on1").mousedown(function () {
				$("#text").text("这是我的家乡")
				$("#imgs").css({"background-image":"url('images/map.png')","background-repeat": "no-repeat","margin-left":"150px"}).animate({"width":"100%","hight":"800px","opacity":1},1000)
			})
			$("#on2").mousedown(function () {
				$("#text").text("这是我的家乡")
				$("#imgs").css({"background-image":"url('images/1.jpg')","background-repeat": "no-repeat","margin-left":"250px"}).animate({"width":"100%","hight":"1000px","opacity":1},1000)
			})
			$("#on3").mousedown(function () {
				$("#text").text("这是我的家乡")
				$("#imgs").css({"background-image":"url('images/2.jpg')","background-repeat": "no-repeat","margin-left":"100px"}).animate({"width":"100%","hight":"1000px","opacity":1},1000)
			})
			$("#on4").mousedown(function () {
				$("#text").text("内蒙引以为豪的蓝天")
				$("#imgs").css({"background-image":"url('images/3.jpg')","background-repeat": "no-repeat","margin-left":"10px"}).animate({"width":"100%","hight":"1000px","opacity":1},1000)
			})
			$("#on5").mousedown(function () {
				$("#text").text("我们老家也不是遍地都是蒙古包")
				$("#imgs").css({"background-image":"url('images/4.jpg')","background-repeat": "no-repeat","margin-left":"0px"}).animate({"width":"100%","hight":"1000px","opacity":1},1000)
			})
			$("#on6").mousedown(function () {
				$("#text").text("这是我的家乡")
				$("#imgs").css({"background-image":"url('images/5.jpg')","background-repeat": "no-repeat","margin-left":"200px"}).animate({"width":"100%","hight":"1000px","opacity":1},1000)
			})
			$("#on7").mousedown(function () {
				$("#text").text("这是我的家乡")
				$("#imgs").css({"background-image":"url('images/6.jpg')","background-repeat": "no-repeat","margin-left":"0px"}).animate({"width":"100%","hight":"1000px","opacity":1},1000)
			})
			$("#on8").mousedown(function () {
				$("#text").text("这个我也没骑过")
				$("#imgs").css({"background-image":"url('images/8.jpg')","background-repeat": "no-repeat","margin-left":"100px"}).animate({"width":"100%","hight":"1000px","opacity":1},1000)
			})
			$("#on9").mousedown(function () {
				$("#text").text("这是莜面")
				$("#imgs").css({"background-image":"url('images/7.jpg')","background-repeat": "no-repeat","margin-left":"0px"}).animate({"width":"100%","hight":"1000px","opacity":1},1000)
			})
			$("#on10").mousedown(function () {
				$("#imgs>img").css({"margin":"0px"}).show(1000)
			})
			$("#ons>img").mouseup(function () {
				$("#text").text("")
				$("#imgs").css({"background-image":""}).animate({"width":"0","hight":"0","opacity":1})

			})
		})
	</script>

</head>
<body>

<div id="box">
	<div id="imgs">
		<p id="text"></p>
		<img src="images/map.png" width="125" height="125" id="img1"/>
		<img src="images/1.jpg" width="125" height="125" id="img2"/>
		<img src="images/2.jpg" width="125" height="125" id="img3"/>
		<img src="images/3.jpg" width="125" height="125" id="img4" />
		<img src="images/4.jpg" width="125" height="125" id="img5"/>
		<img src="images/5.jpg" width="125" height="125" id="img6"/>
		<img src="images/6.jpg" width="125" height="125" id="img7"/>
		<img src="images/7.jpg" width="125" height="125" id="img8"/>
		<img src="images/8.jpg" width="125" height="125" id="img9"/>
	</div>
	<div id="main">

		<div class="folder">
			<div class="front"></div>
			<div class="back"></div>
		</div>​
		<div id="ons">
			<img src="images/1.png" style="top:340px;left:100px;" alt="box" id="on1"/>
			<img src="images/2.png" style="top:340px;left:170px;" alt="calculator"id="on2" />
			<img src="images/3.png" style="top:340px;left:240px;" alt="clipboard"id="on3"/>
			<img src="images/4.png" style="top:340px;left:310px;" alt="console" id="on4"/>
			<img src="images/5.png" style="top:340px;left:380px;" alt="basketball" id="on5"/>
			<img src="images/6.png" style="top:400px;left:100px;" alt="facebook" id="on6"/>
			<img src="images/12.png" style="top:400px;left:170px;" alt="gift" id="on7"/>
			<img src="images/8.png" style="top:400px;left:240px;" alt="id card" id="on8"/>
			<img src="images/13.png" style="top:400px;left:310px;" alt="imac" id="on9"/>
		</div>

		<img src="images/10.png" style="top:400px;left:380px;" alt="system monitoring" id="on10"/>

	</div>
</div>

<!-- JavaScript Includes -->

<script type="text/javascript" src="js/script.js"></script>

</body>
</html>
